<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>404</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        body{
            height:100vh;
            background:radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
            overflow:hidden;
            font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-direction:column;
            color:#fff;
        }
        /* 404 数字 */
        .num{
            font-size:clamp(120px, 25vw, 220px);
            font-weight:900;
            letter-spacing:-20px;
            position:relative;
            animation:fadeIn 1.2s ease-out, float 4s ease-in-out infinite;
        }
        .num span{display:inline-block;animation:float 4s ease-in-out infinite;}
        .num span:nth-child(2){animation-delay:.2s;}
        .num span:nth-child(3){animation-delay:.4s;}
        @keyframes fadeIn{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
        @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);}}

        /* 宇航员 */
        svg.astronaut{
            position:absolute;
            width:180px;
            top:15%;left:10%;
            animation:drift 25s linear infinite alternate;
        }
        @keyframes drift{
            0%{transform:translate(0,0) rotate(-5deg);}
            100%{transform:translate(120px, -60px) rotate(5deg);}
        }

        /* 星球 */
        .planet{
            position:absolute;
            width:300px;height:300px;
            background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3CradialGradient id='g' cx='.6' cy='.4'%3E%3Cstop offset='0' stop-color='%2341a8e0'/%3E%3Cstop offset='1' stop-color='%232c5aa0'/%3E%3C/radialGradient%3E%3Ccircle fill='url(%23g)' cx='100' cy='100' r='100'/%3E%3C/svg%3E") center/cover;
            border-radius:50%;
            bottom:-150px;right:-100px;
            animation:rotate 60s linear infinite;
        }
        @keyframes rotate{from{transform:rotate(0);}to{transform:rotate(360deg);}}

        /* 文案 */
        .tips{margin:20px 0 30px;font-size:18px;opacity:.8;}
        /* 按钮 */
        .btn{
            position:relative;
            padding:12px 36px;
            background:#2c5aa0;
            border:none;border-radius:30px;
            color:#fff;font-size:16px;cursor:pointer;
            box-shadow:0 0 0 0 rgba(44,90,160,.6);
            animation:pulse 2s infinite;
            transition:background .3s;
        }
        .btn:hover{background:#41a8e0;}
        @keyframes pulse{
            0%{box-shadow:0 0 0 0 rgba(44,90,160,.6);}
            70%{box-shadow:0 0 0 18px rgba(44,90,160,0);}
            100%{box-shadow:0 0 0 0 rgba(44,90,160,0);}
        }
    </style>
</head>
<body>
<!-- 404 数字 -->
<div class="num">
    <span>4</span><span>0</span><span>4</span>
</div>

<!-- 宇航员 -->
<svg class="astronaut" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
    <g>
        <circle cx="100" cy="80" r="35" fill="#fff" opacity=".9"/>
        <path d="M100 115c-20 0-35 15-35 35h70c0-20-15-35-35-35z" fill="#fff"/>
        <path d="M55 80a45 45 0 0190 0h-15a30 30 0 00-60 0z" fill="#2c5aa0"/>
        <circle cx="85" cy="80" r="5" fill="#000"/>
        <circle cx="115" cy="80" r="5" fill="#000"/>
    </g>
</svg>

<!-- 星球 -->
<div class="planet"></div>

<!-- 文案 & 按钮 -->
<div class="tips">噢，页面似乎飞进了未知星系…</div>
<!--<button class="btn" onclick="location.href='/index.html'">返回首页</button>-->
</body>
</html>